<template>
	<div class="fx-list-cell-date" @click="onCellClick">
		<div v-show="!isEdit" class="fx-ellipsis fx-cursor"><slot>{{cellTextComputed}}</slot></div>
		<w-validate ref="validate" placement="bottom">
			<el-date-picker
				ref="date-picker"
				v-show="isEdit"
				v-model="currentValue"
				type="datetime"
				value-format="yyyy-MM-dd HH:mm:00"
				format="yyyy-MM-dd HH:mm"
				:placeholder="placeholder"
				:disabled="disabled"
				:clearable="clearable"
				:pickerOptions="pickerOptions"
				class="cell-input-date"
				@change="onDateChange"
				@focus="onFocus"
				@blur="onBlur"
			></el-date-picker>
		</w-validate>
	</div>
</template>
<script>
import cellMixin from '../mixins/fxListCell.js'
export default {
	name: 'fx-list-cell-date',
	mixins: [cellMixin],
	props: {
		isEdit: Boolean,
		cellText: null,
		value: null,
		stop: Boolean,
		disabled: Boolean,
		clearable: Boolean,
		placeholder: {
			type: String,
			default: '选择日期'
		},
		pickerOptions: Object
	},
	data () {
		return {
			currentValue: '',
			validateFlag: false,
			validateMessage: '',
			pickerVisible: ''
		}
	},
	computed: {
		cellTextComputed () {
			if (!this.$fxUtils.isDef(this.cellText)) {
				return this.currentValue
			}
			return this.cellText
		}
	},
	created () {
		this.initValidate({
			showValidate: this.showValidate,
			clearValidate: this.clearValidate,
			setFocus: this.focus
		})
	},
	destroyed () {
		this.pickerVisible = ''
		document.body.removeEventListener('keyup', this.handleKeyup)
	},
	watch: {
		value: {
			immediate: true,
			handler (val) {
				this.currentValue = val
			}
		}
	},
	methods: {
		showValidate (message) {
			this.$refs.validate.show(message)
			this.focus()
		},
		clearValidate () {
			this.$refs.validate.clear()
		},
		focus () {
			this.$refs['date-picker'].focus()
		},
		onFocus () {
			const pickerVisible = this.$refs['date-picker'].pickerVisible
			if (this.pickerVisible !== pickerVisible && pickerVisible) {
				this.pickerVisible = pickerVisible
				setTimeout(() => {
					document.body.addEventListener('keyup', this.handleKeyup)
				}, 100)
			}
		},
		onBlur () {
			this.$refs.validate.clear()
			const pickerVisible = this.$refs['date-picker'].pickerVisible
			if (this.pickerVisible !== pickerVisible && !pickerVisible) {
				this.pickerVisible = ''
				setTimeout(() => {
					document.body.removeEventListener('keyup', this.handleKeyup)
				}, 300)
			}
		},
		onCellClick () {
			if (this.stop) {
				event.stopPropagation()
			}
			this.$emit('click', this.row, this.rowIndex)
		},
		onInputEnter () {
			this.$fxUtils.fxDebounce(200).then(() => {
				if (typeof this.$listeners['on-input-enter'] === 'function') {
					this.$emit('on-input-enter', this.row, this.rowIndex)
				} else {
					this.cellEnter(event)
				}
			})
		},
		onDateChange (date) {
			this.$emit('input', this.currentValue)
			this.$emit('on-change', this.currentValue, this.row)
		},
		handleKeyup (event) {
			const keyCode = event.keyCode
			if (keyCode === 13) {
				this.onInputEnter(event)
			}
		}
	}
}
</script>
<style lang="stylus" scoped>
@import '~$assets/stylus/varsty.styl'
.fx-list-cell-date {
	.cell-input-date {
		width: 100%
	}
}
</style>

